<template>
  <div class="flex flex-col h-screen">
    <div class="navbar bg-base-100">
      <div class="navbar-start">
        <div class="dropdown">
          <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                 stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16"/>
            </svg>
          </div>
          <!-- mobile -->
          <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
            <li v-for="item in navigation">
              <a :href="item.href">{{item.name}}</a>
              <ul class="p-2" v-if="item.submenus.length > 0">
                <li v-for="submenu in item.submenus">
                  <a :href="submenu.href">{{submenu.name}}</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <a class="btn btn-ghost text-xl font-mono">Féng Hé Guài</a>
      </div>
      <!-- pc -->
      <div class="navbar-center hidden lg:flex">
        <ul class="menu menu-horizontal px-1">

          <li v-for="item in navigation">
            <a :class="item.current ? 'animate-bounce font-semibold border-2' : 'transition-all duration-500 ease-in-out font-medium'" :href="item.href" v-if="item.submenus.length === 0">{{item.name}}</a>
            <details v-else>
              <summary>{{item.name}}</summary>
              <ul class="p-2">
                <li v-for="submenu in item.submenus"><a :href="submenu.href">{{ submenu.name }}</a></li>
              </ul>
            </details>
          </li>

        </ul>
      </div>
      <div class="navbar-end">
        <div class="mr-16">
          <a class="btn" @click="toLoginPage()" v-if="user === null">登录</a>
          <div class="dropdown dropdown-hover" v-else>
            <div tabindex="0" class="avatar flex justify-center w-14 m-1">
              <div class="mask mask-squircle w-24" v-if="user.headImgKey">
                <img :src="genFileUrl(user.headImgKey)"/>
              </div>
              <div class="avatar placeholder mask mask-squirclew-14" v-if="!user.headImgKey">
                <div class="bg-neutral text-neutral-content w-14 rounded-full opacity-80">
                  <span class="text-md">头像</span>
                </div>
              </div>
            </div>

            <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-[1] w-32 p-2 shadow">
              <li><a>个人中心</a></li>
              <li><a @click="logout()">注销登录</a></li>
            </ul>
          </div>
        </div>

      </div>
    </div>

    <main class="flex-1 overflow-hidden bg-gray-50">
      <div class="mx-auto max-w-full">
        <slot name="main"></slot>
      </div>

<!--      <footer class="footer footer-center p-4 bg-base-300 text-base-content absolute bottom-0">-->
<!--        <aside>-->
<!--          <p>Copyright © {{ new Date().getFullYear() }} - All right reserved by bsdsma.com</p>-->
<!--        </aside>-->
<!--      </footer>-->

    </main>


  </div>
</template>

<style>
body {
  overflow: hidden;
}
</style>

<script setup>

import auth from "../utils/auth/index.js";
import {genFileUrl, httpPost} from "../utils/http/http-helper.js";
import {notificationError} from "../utils/notification/index.js";

const user = ref({})

const route = useRoute()
const router = useRouter()

const activeIndex = computed(() => {
  return route.meta.index
})

function loadData(){
  user.value = auth.getLocalUser()
  console.log(user.value)
}

function logout(){
  httpPost('/api/auth/logout').then(resp => {
    if(!resp.success){
      notificationError(resp.msg)
      return
    }
    auth.clearAuthInfo()
    loadData()
  })
}

if(process.client){
  loadData()
}

function toLoginPage(){
  router.push('/login')

}

const navigation = [
  {name: '首页', href: '/', current: activeIndex.value === 'index', submenus: []},
]


</script>